<template>
  <div class="">
    <ul class="nav">
      <li><router-link to="/">全部</router-link></li>
      <li><router-link to="/unpay">未付款</router-link></li>
      <li><router-link to="/pay">已付款</router-link></li>
      <li><router-link to="/undone">未完成</router-link></li>
      <li><router-link to="/done">已完成</router-link></li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  created() {},
  methods: {},
  components: {},
};
</script>

<style lang="scss">
.nav {
  width: 100%;
  display: flex;
  li {
    flex: 1;
    height: 30px;
    border: 1px solid red;
    text-align: center;
    line-height: 30px;
    box-sizing: border-box;
    a {
      color: #000;
    }
    .router-link-exact-active {
      color: cornflowerblue;
    }
  }
}
</style>
